const React = require('react');
const BaseDemo = require('./BaseDemo');
const notification = require('Notification');
const Button = require('Button');
const FontIcon = require('FontIcon');
const Tile = require("./Tile");


class TabPage extends BaseDemo{

    openNotification(){
        notification.open({
            title: "Notification Title",
            desc: "I will never close automatically. I will be close automatically. I will never close automatically."
        });
    }

    openNotification2(){
        notification.open({
            title: "Notification Title",
            desc: "I will never close automatically. I will be close automatically. I will never close automatically.",
            icon: <FontIcon icon="coffee"/>,
            duration: 0
        });
    }

    openNotification3(){
        notification.success({
            title: "Notification Title",
            desc: "I will never close automatically. I will be close automatically. I will never close automatically.",
            duration: 0
        });

        notification.info({
            title: "Notification Title",
            desc: "I will never close automatically. I will be close automatically. I will never close automatically.",
            duration: 0
        });

        notification.warning({
            title: "Notification Title",
            desc: "I will never close automatically. I will be close automatically. I will never close automatically.",
            duration: 0
        });

        notification.error({
            title: "Notification Title",
            desc: "I will never close automatically. I will be close automatically. I will never close automatically.",
            duration: 0
        });

        notification.question({
            title: "Notification Title",
            desc: "I will never close automatically. I will be close automatically. I will never close automatically.",
            duration: 0
        });
    }

    openNotification4(){
        notification.success({
            title: "Notification Title",
            desc: "I will never close automatically. I will be close automatically. I will never close automatically.",
            duration: 0,
            dock: notification.DOCK.BOTTOMRIGHT
        });
    }

    openNotification5(){
        notification.info({
            title: "Notification Title",
            desc: "I will never close automatically. I will be close automatically. I will never close automatically.",
            duration: 0,
            dock: notification.DOCK.BOTTOMLEFT
        });
    }
    openNotification6(){
        notification.info({
            title: "Notification Title",
            desc: "I will never close automatically. I will be close automatically. I will never close automatically.",
            duration: 0,
            dock: notification.DOCK.TOPLEFT
        });
    }

    openNotification7(){
        let key = `open${Date.now()}`;
        notification.info({
            title: "Notification Title",
            desc: "I will never close automatically. I will be close automatically. I will never close automatically.",
            duration: 0,
            btn: <Button onClick={()=>{notification.close(key);}} size="small" theme="primary">confirm</Button>,
            key: key,
            onClose: ()=>{
                console.log('Notification was closed. Either the close button was clicked or duration time elapsed.');
            }
        });
    }

    render() {

        return (
            <div className="container">
                <Tile header={"基本使用方式"}>

                    <Button onClick={this.openNotification.bind(this)}>打开</Button>

                    <Button onClick={this.openNotification2.bind(this)}>打开</Button><br/>

                    <Button onClick={this.openNotification3.bind(this)}>success</Button><br/>

                    <Button onClick={this.openNotification4.bind(this)}>bottomRight</Button><br/>
                    <Button onClick={this.openNotification5.bind(this)}>bottomLeft</Button><br/>
                    <Button onClick={this.openNotification6.bind(this)}>topLeft</Button><br/>

                    <Button onClick={this.openNotification7.bind(this)}>custom btn</Button><br/>
                </Tile>
            </div>
        )
    }
}

module.exports = TabPage;
